<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Complex</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var chicago = new google.maps.LatLng(41.850033, -87.6500523);
                var myOptions = {
                    zoom:7,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: chicago
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("directionsPanel"));
            }
  
            function calcRoute() {
                var start = document.getElementById("start").value;
                var end = document.getElementById("end").value;
                var request = {
                    origin:start,
                    destination:end,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }
        </script>
    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
        <div>
            <b>Start: </b>
            <select id="start" onchange="calcRoute();">
                <option value="chicago, il">Chicago</option>
                <option value="st louis, mo">St Louis</option>
                <option value="joplin, mo">Joplin, MO</option>
                <option value="oklahoma city, ok">Oklahoma City</option>
                <option value="amarillo, tx">Amarillo</option>
                <option value="gallup, nm">Gallup, NM</option>
                <option value="flagstaff, az">Flagstaff, AZ</option>
                <option value="winona, az">Winona</option>
                <option value="kingman, az">Kingman</option>
                <option value="barstow, ca">Barstow</option>
                <option value="san bernardino, ca">San Bernardino</option>
                <option value="los angeles, ca">Los Angeles</option>
            </select>
            <b>End: </b>
            <select id="end" onchange="calcRoute();">
                <option value="chicago, il">Chicago</option>
                <option value="st louis, mo">St Louis</option>
                <option value="joplin, mo">Joplin, MO</option>
                <option value="oklahoma city, ok">Oklahoma City</option>
                <option value="amarillo, tx">Amarillo</option>
                <option value="gallup, nm">Gallup, NM</option>
                <option value="flagstaff, az">Flagstaff, AZ</option>
                <option value="winona, az">Winona</option>
                <option value="kingman, az">Kingman</option>
                <option value="barstow, ca">Barstow</option>
                <option value="san bernardino, ca">San Bernardino</option>
                <option value="los angeles, ca">Los Angeles</option>
            </select>
        </div>
        <div id="map_canvas" style="float:left;width:70%; height:100%"></div>
        <div id="directionsPanel" style="float:right;width:30%;height:100%"></div>
    </body>
</html>
